<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">能耗统计</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<!-- 主题内容 -->
		<view  class="padding-t">
			<view class="public-main-info">
				<view class="u-main">
					<!-- 下面表格 -->
					<view class="padding-lr-30">
						<view class="u-table  padding-tb-20">
							<view class="">
								<view class="u-table-head">
									<view class="u-table-head-item u-font-weight" v-for="(item, index) in tableHeads" :key="index">{{item.name}}</view>
									<view class="u-table-head-item u-font-weight" style="width: 350upx;">记录时间</view>
								</view>
								<view>
									<scroll-view scroll-y="true" :style="{height: uHeight + 'px'}" @scrolltolower="lower">
										<view class="u-table-bady-column" v-for="(item, indexs) in tableData" :key="indexs">
											<view class="u-table-head-item">{{item.waterConsume}}</view>
											<view class="u-table-head-item">{{item.electricConsume}}</view>
											<view class="u-table-head-item">{{item.gasConsume}}</view>
											<view class="u-table-head-item" style="width: 350upx;">{{item.recordDate}}</view>
										</view>
										<view class="loading-info" v-show="flag">
											{{info}}
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	export default {
		data() {
			return {
				flag: false,
				loading: false,
				info: '',
				pageIndex: 1,
				pageSize: 30,
				tableHeads: [
					{
						name: '水消耗(m³)',
					},
					{
						name: '电消耗(KW.h)',
					},
					{
						name: '气消耗(m³)',
					}
				],
				tableData: [],
				uHeight: 0
			}
		},
		mounted() {
			var len = 0
			uni.getSystemInfo({
				success: function (res) {
					len = res.windowHeight
				}
			})
			this.uHeight = len - this.CustomBar - 85
			this.getInfo()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getInfo() {
				let res = await post('/CostInformation/EnergyConsumptionInformation/DailyMediaConsumption', {
					page: this.pageIndex,
					size: this.pageSize
				})
				if(res.code == 0) {
					if(res.data.length == 0) {
						this.info = '已经到底了'
					}else {
						this.tableData = this.tableData.concat(res.data)
						this.flag = false
					}
				}
			},
			lower(e) {
				if (e.target.direction == "bottom") {
					this.flag = true
					this.info = '加载中……'
					++this.pageIndex
					this.getInfo()
				}
			}
		}
	}
</script>

<style>
	.loading-info {
		text-align: left;
		padding-left: 220upx;
		margin-top: 20upx;
	}
</style>
